<template>
	<div class="seller" ref="sellerView">
		<div class="back-wrapper">
			<span class="icon-arrow_lift" @click="clickImg"></span>
		</div>
		<div class="seller-wrapper">
			<Split></Split>
			<div class="seller-view">
				<div class="address-wrapper">
					<div class="address-left">
						云南省楚雄市楚雄师范学院
					</div>
					<div class="address-right">
						<div class="content"></div>
					</div>
				</div>

				<div class="pics-wrapper" v-if="seller.poi_env" ref="picsView">
					<ul class="pics-list" ref="picsList">
						<li ref="picsItem" class="pics-item" v-for="(imgurl,index) in seller.poi_env.thumbnails_url_list" :key="index">
							<img :src="imgurl">
						</li>
					</ul>
				</div>

				<div class="safety-wrapper">
					查看食品安全档案
					<span class="icon-keyboard_arrow_right"></span>
				</div>
			</div>

			<Split></Split>
			<div class="tip-wrapper">
				<div class="delivery-wrapper">
					配送服务: {{seller.app_delivery_tip}}
				</div>

				<div class="shipping-wrapper">
					配送时间: {{seller.shipping_time}}
				</div>
			</div>

			<Split></Split>
			<div class="other-wrapper">
				<div class="server-wrapper">
					商家服务
					<div class="poi-server" v-for="(item,index) in seller.poi_service" :key="index">
						<img :src="item.icon"> {{item.content}}
					</div>
				</div>
				<div class="discounts-wrapper">
					<div class="discounts-item" v-for="(item,index) in seller.discounts2" :key="index">
						<div class="icon">
							<img :src="item.icon_url">
						</div>
						<div class="text">
							{{item.info}}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import Split from '../split/Split'
	import BScroll from 'better-scroll'

	export default {
		data() {
			return {
				seller: {}
			}
		},
		created() {
			fetch("/api/seller")
				.then(res => {
					return res.json()
				})
				.then(response => {
					if (response.code == 0) {
						this.seller = response.data
						this.$nextTick(() => {
							if (this.seller.poi_env.thumbnails_url_list) {
								let imgW = this.$refs.picsItem[0].clientWidth
								let marginR = 11
								let width = (imgW + marginR) * this.seller.poi_env.thumbnails_url_list.length
								this.$refs.picsList.style.width = width + "px"
								this.scroll = new BScroll(this.$refs.picsView, {
									scrollX: true
								})
							}
							this.sellerView = new BScroll(this.$refs.sellerView)
						})

					}
				})
		},
		methods: {
			clickImg() {
				this.$router.push("/home");
			}
		},
		components: {
			Split
		}
	}
</script>

<style scoped>
	.back-wrapper {
		margin-top: 5px;
		height: 20px;
	}

	.seller {
		left: 0;
		top: 191px;
		bottom: 0px;
		width: 100%;
		background: #F4F4F4;
		overflow: hidden;
	}

	.seller .seller-wrapper {
		background: white;
	}

	.seller .seller-wrapper .seller-view {
		padding-left: 15px;
	}

	.seller .seller-wrapper .seller-view .address-wrapper {
		display: flex;
		padding: 16px 0;
		border-bottom: 1px solid #F4F4F4;
	}

	.seller .seller-wrapper .seller-view .address-wrapper .address-left {
		flex: 1;
		background: url(address.png) no-repeat left center;
		padding-left: 26px;
		padding-right: 31px;
		background-size: 14px 16px;
		font-size: 14px;
		line-height: 19px;
	}

	.seller .seller-wrapper .seller-view .address-wrapper .address-right {
		flex: 0 0 60px;
		background: url(line.png) no-repeat left center;
		background-size: 1px 15px;
	}

	.seller .seller-wrapper .seller-view .address-wrapper .address-right .content {
		width: 100%;
		height: 100%;
		background: url(phone.png) no-repeat center center;
		background-size: 18px 18px;
	}

	.seller .seller-wrapper .seller-view .pics-wrapper {
		padding: 10px 0;
		overflow: hidden;
		border-bottom: 1px solid #F4F4F4;
		white-space: nowrap;
	}

	.seller .seller-wrapper .seller-view .pics-wrapper .pics-list {}

	.seller .seller-wrapper .seller-view .pics-wrapper .pics-list .pics-item {
		display: inline-block;
		margin-right: 11px;
		width: 93px;
		height: 75px;
	}

	.seller .seller-wrapper .seller-view .pics-wrapper .pics-list .pics-item img {
		width: 100%;
		height: 100%;
		border-radius: 2px;
	}

	.seller .seller-wrapper .seller-view .safety-wrapper {
		padding: 15px 14px 15px 25px;
		background: url(safety.png) no-repeat left center;
		background-size: 14px 16px;
		font-size: 14px;
	}

	.seller .seller-wrapper .seller-view .safety-wrapper span {
		float: right;
		font-size: 14px;
	}

	.seller .seller-wrapper .tip-wrapper {
		padding-left: 15px;
	}

	.seller .seller-wrapper .tip-wrapper .delivery-wrapper {
		background: url(delivery.png) no-repeat left center;
		background-size: 14px 16px;
		padding: 15px 0 15px 25px;
		font-size: 14px;
		border-bottom: 1px solid #F4F4F4;
	}

	.seller .seller-wrapper .tip-wrapper .shipping-wrapper {
		background: url(time.png) no-repeat left center;
		padding: 15px 17px 15px 25px;
		background-size: 15px 15px;
		font-size: 14px;
		line-height: 18px;
	}

	.seller .seller-wrapper .other-wrapper {
		padding-left: 15px;
	}

	.seller .seller-wrapper .other-wrapper .server-wrapper {
		background: url(server.png) no-repeat left center;
		background-size: 15px 15px;
		padding: 15px 0 17px 25px;
		font-size: 14px;
		border-bottom: 1px solid #F4F4F4;
	}

	.seller .seller-wrapper .other-wrapper .server-wrapper .poi-server {
		display: inline-block;
		margin-left: 17px;
	}

	.seller .seller-wrapper .other-wrapper .server-wrapper .poi-server img {
		width: 15px;
		height: 15px;
		margin-right: 6px;
		vertical-align: middle;
	}

	.seller .seller-wrapper .other-wrapper .discounts-wrapper {
		padding: 17px 24px 19px 0;
	}

	.seller .seller-wrapper .other-wrapper .discounts-wrapper .discounts-item {
		display: flex;
	}

	.seller .seller-wrapper .other-wrapper .discounts-wrapper .discounts-item .icon {
		flex: 0 0 25px;
	}

	.seller .seller-wrapper .other-wrapper .discounts-wrapper .discounts-item .icon img {
		width: 15px;
		height: 15px;
	}

	.seller .seller-wrapper .other-wrapper .discounts-wrapper .discounts-item .text {
		flex: 1;
		font-size: 14px;
	}
</style>
